import "./style.scss";
import ImageWithError from "@page/common/comps/ImageWithError";
import ProtocolTag from "@page/common/comps/ProtocolTag";
import icon_promise from "@assets/icon_promise.png";
import urlHook from "@page/common/utils/urlHook";


class SupplierLeft extends React.Component {
    render() {
        const {
            logUrl,
            orderCount,
            productCount,
            city,
            province,
            supplierId,
            supplierName,
            realPrice,
            protocol
        } = this.props.info;
        return (
            <div
                className="rj_supplier_left"
                onClick={() => {
                    window.open(`#supplierShop?suppId=${supplierId}`);
                }}
            >
                <div className="rj_top">
                    <div className="rj_top_img">
                        <ImageWithError
                            src={logUrl}
                            style={{ width: 64, height: 64 }}
                        />
                    </div>
                    <div className="rj_top_txt">
                        <div className="zen_clf zen_m-b-10 rj_l-hover">
                            <span
                                dangerouslySetInnerHTML={{
                                    __html: supplierName
                                }}
                                className="zen_f-left zen_l-h-22"
                            />
                            {realPrice == 1 && (
                                <img
                                    onClick={e => {
                                        e.stopPropagation();
                                        window.open(urlHook.helpForTurePrice);
                                    }}
                                    src={icon_promise}
                                    style={{
                                        width: 30,
                                        height: 30,
                                        marginTop: -5,
                                        float:'left'
                                    }}
                                />
                            )}
                            {protocol=='1'&& (
                                <ProtocolTag className="zen_fs-12 zen_f-left zen_bg-58d1bd zen_FFFFFF zen_p-v-4 zen_p-h-9 zen_bdr-3 zen_m-l-3 " />
                            )}
                        </div>

                        <p className="zen_fs-12 zen_l-h-22 zen_l-22 rj_l-hover">主营：</p>
                        <div className="zen_fs-12 zen_l-h-22 zen_l-22 rj_l-hover">
                            <span>地区:</span>
                            {province && <span>{province}</span>}
                            {city && <span>{city}</span>}
                        </div>
                    </div>
                </div>
                <div className="rj_bottom">
                    <span>累计订单量</span>
                    <em className="rj_m-r">{orderCount}</em>
                    <span>共</span>
                    <em>{productCount}</em>
                    <span>件商品</span>
                </div>
            </div>
        );
    }
}

export default SupplierLeft;
